body > header {
  background-color: var(--header-bg-color);
  color: var(--header-fg-color);
  fill: var(--header-fg-color);

  nav {
    display: flex;
    font-size: 0;
    justify-content: space-between;
    overflow-x: auto;
    padding: 0 1rem;

    ul {
      display: inline-block;
      flex: 0 0 auto;
      margin: 0;
      padding: 0;
    }

    li {
      display: inline-block;
      list-style: none;
      vertical-align: middle;
    }

    a {
      color: var(--header-fg-color);
      display: inline-block;
      font-family: var(--ui-font);
      font-size: 0.85rem;
      line-height: 2.9em;
      opacity: 1;
      padding: 0 0.65rem;
      text-decoration: none;
      white-space: nowrap;
    }

    a:hover {
      opacity: 0.7;
    }

    svg {
      height: 1em;

      * {
        fill: inherit !important;
      }
    }

    .logomark {
      line-height: 0;

      svg {
        height: auto;
      }
    }
  }

  .secondary {
    background-color: var(--secondary-bg-color);
    flex-wrap: wrap;
    padding: 0.25rem 1rem;
    overflow-x: auto;

    a {
      color: var(--secondary-fg-color);
      font-size: 0.7rem;
    }

    #search-container {
      align-self: center;
      margin: 0.25em 0;
    }

    svg {
      height: 16px;
      fill: var(--secondary-fg-color);
      margin: 0.4rem 0.3rem;
      position: absolute;
    }

    #search-input {
      background-color: var(--bg-color);
      border: 1px solid rgba(black, 0.15);
      border-radius: 0.3em;
      box-shadow: inset 0 1px 1px rgba(black, 0.05);
      color: var(--fg-color);
      padding: 6px;
      text-indent: 1rem;
      transition: all 200ms ease-in-out;
      width: 300px;
    }

    #search-input:focus {
      box-shadow: inset 0 1px 1px rgba(black, 0.05);
      outline: none;
    }

    #results-container {
      background-color: var(--bg-color);
      border-radius: 0.3rem;
      box-shadow:
        inset 0 -1px 0 0 white,
        inset 1px 0 0 rgba(white, 0.3),
        inset -1px 0 0 rgba(white, 0.3),
        inset 0 -1px 0 0 rgba(white, 0.5),
        0 0 0 1px rgba(black, 0.15),
        0 3px 4px rgba(black, 0.15),
        0 3px 3px -3px rgba(black, 0.35);
      overflow: hidden;
      position: absolute;
      transform: translate(-300px, 36px);
      z-index: 99;

      @media (prefers-color-scheme: dark) {
        box-shadow:
        inset 0 1px 0 0 rgba(white, 0.09),
        inset 1px 0 0 rgba(white, 0.03),
        inset -1px 0 0 rgba(white, 0.03),
        inset 0 -1px 0 0 rgba(white, 0.05),
        0 0 0 1px black,
        0 3px 4px rgba(black, 0.25),
        0 3px 3px -3px rgba(black, 0.45);
      }

      li {
        display: block;
        width: 300px;

        a {
          color: var(--fg-color);
          display: grid;
          grid-column-gap: 12px;
          grid-template-columns: 3em auto;
          line-height: 1.25em;
          margin-bottom: 6px;
          margin-top: 6px;
          padding: 6px 12px;

          .featured-image {
            background-color: var(--silver-200);
            background-origin: border-box;
            background-position: 50%;
            background-size: cover;
            border: 1px solid rgba(black, 0.15);
            border-radius: 0.2rem;
            box-shadow:
              inset 0 0 0 1px rgba(white, 0.05),
              inset 0 1px 0 0 rgba(white, 0.2),
              inset 0 -1px 0 0 rgba(white, 0.1),
              0 1px 3px rgba(black, 0.05),
              0 1px 2px rgba(black, 0.1);
            grid-row: 1 / span 2;
            height: 3em;
            margin-right: 12px;
            width: 3em;

            @media (prefers-color-scheme: dark) {
              background-color: var(--silver-900);
              border: 1px solid black;
              box-shadow:
                inset 0 0 0 1px rgba(255, 255, 255, 0.02),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
                inset 0 -1px 0 0 rgba(255, 255, 255, 0.05),
                0 1px 3px rgba(0, 0, 0, 0.1),
                0 1px 2px rgba(0, 0, 0, 0.2);
            }
          }

          #title {
            grid-column-start: 2;
          }

          #description {
            font-size: 0.8em;
            grid-column-start: 2;
            opacity: 0.8;
          }

        }

        a:hover {
          background-color: var(--secondary-bg-color);
        }
      }
    }
  }
}

